import { Spin, Row, Col, Divider, Typography, Anchor, Menu } from "antd"
import React, { useEffect } from "react"
import { RouteComponentProps, useParams } from "react-router-dom"
import { ProductIntro, ProductComments } from "../../components"
import styles from "./detail-page.module.css"
import { DatePicker } from "antd"
import { comments } from "./mockup"
import { getProductDetail } from "../../redux/product-detail/slice"
import { useSelector } from "../../redux/hooks"
import { useDispatch } from "react-redux"
import { MainLayout } from "../../layout/main-layout"

const { RangePicker } = DatePicker

interface MatchParams {
  touristRouteId: string
}

export const DetailPage: React.FC<RouteComponentProps<MatchParams>> = (
  props
) => {
  const { touristRouteId } = useParams<MatchParams>()
  const loading = useSelector((state) => state.productDetail.loading)
  const error = useSelector((state) => state.productDetail.error)
  const product = useSelector((state) => state.productDetail.data)

  const dispatch = useDispatch()
  // useEffect第二个参数是个空数组代表只执行一次
  useEffect(() => {
    dispatch(getProductDetail(touristRouteId))
  }, [])

  if (loading) {
    return (
      <Spin
        size="large"
        style={{
          marginTop: 200,
          marginBottom: 200,
          marginLeft: "auto",
          marginRight: "auto",
          width: "100%",
        }}
      />
    )
  }
  if (error) {
    return <div>网站出错：{error}</div>
  }
  return (
    <MainLayout>
      {/* 产品简介与日期选择 */}
      <div className={styles["product-intro-container"]}>
        <Row>
          <Col span={13}>
            <ProductIntro
              title={product.title}
              shortDescription={product.description}
              price={product.originalPrice}
              coupons={product.coupons}
              points={product.points}
              discount={product.price}
              rating={product.rating}
              pictures={product.touristRoutePictures.map((p) => p.url)}
            />
          </Col>
          <Col span={11}>
            <RangePicker />
          </Col>
        </Row>
      </div>
      {/* 锚点菜单 */}
      <Anchor className={styles["product-detail-anchor"]}>
        <Menu mode="horizontal">
          <Menu.Item key="1">
            <Anchor.Link href="#feature" title="产品特色" />
          </Menu.Item>
          <Menu.Item key="3">
            <Anchor.Link href="#fee" title="费用" />
          </Menu.Item>
          <Menu.Item key="4">
            <Anchor.Link href="#notes" title="预订须知" />
          </Menu.Item>
          <Menu.Item key="5">
            <Anchor.Link href="#comments" title="用户评价" />
          </Menu.Item>
        </Menu>
      </Anchor>
      {/* 产品特色 */}
      <div id="feature" className={styles["product-detail-container"]}>
        <Divider orientation={"center"}>
          <Typography.Title level={3}>产品特色</Typography.Title>
        </Divider>
        <div
          dangerouslySetInnerHTML={{
            __html: product.features,
          }}
          style={{ margin: 50 }}
        />
      </div>
      {/* 费用 */}
      <div id="fee" className={styles["product-detail-container"]}>
        <Divider orientation={"center"}>
          <Typography.Title level={3}>费用</Typography.Title>
        </Divider>
        <div
          dangerouslySetInnerHTML={{
            __html: product.features,
          }}
          style={{ margin: 50 }}
        />
      </div>
      {/* 预定须知 */}
      <div id="notes" className={styles["product-detail-container"]}>
        <Divider orientation={"center"}>
          <Typography.Title level={3}>预定须知</Typography.Title>
        </Divider>
        <div
          dangerouslySetInnerHTML={{
            __html: product.features,
          }}
          style={{ margin: 50 }}
        />
      </div>
      {/* 商品评价 */}
      <div id="comments" className={styles["product-detail-container"]}>
        <Divider orientation={"center"}>
          <Typography.Title level={3}>商品评价</Typography.Title>
        </Divider>
        <div style={{ margin: 40 }}>
          <ProductComments data={comments} />
        </div>
      </div>
    </MainLayout>
  )
}
